<template>
  <div class="login-group">
    <div class="login-form">
      <h3>后台登录</h3>
      <el-form :model="loginInfo" :rules="rules" ref="loginForm" label-position="right" label-width="80px" @keydown.enter.native="login">
        <el-form-item label="用户名" prop="username">
          <el-input placeholder="用户名" v-model="loginInfo.username" prefix-icon="el-icon-user"/>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input placeholder="密码" prefix-icon="el-icon-lock" show-password v-model="loginInfo.password"/>
        </el-form-item>
        <el-form-item label="验证码" prop="code">
          <el-input placeholder="验证码" v-model="loginInfo.code" prefix-icon="el-icon-table-lamp">
            <template slot="append">
              <img :src="kaptchaSrc" title="点击切换验证码" style="height: 40px;width: 120px;display: block" alt="" @click="getKaptcha">
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login(1,$event)">登录</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { uuid } from 'vue-uuid'

export default {
  name: 'LoginView',
  data () {
    return {
      loginInfo: {
        username: '',
        password: '',
        uuid: '',
        code: ''
      },
      rules: {
        username: [{
          required: true,
          message: '用户名不能为空',
          trigger: 'blur'
        }],
        password: [{
          required: true,
          message: '密码不能为空',
          trigger: 'blur'
        }],
        code: [{
          required: true,
          message: '验证码不能为空',
          trigger: 'blur'
        }, {
          min: 4,
          max: 4,
          message: '验证码长度必须4位',
          trigger: 'blur'
        }]
      },
      kaptchaSrc: ''
    }
  },
  methods: {
    getKaptcha () {
      this.loginInfo.uuid = uuid.v4()
      this.kaptchaSrc = process.env.VUE_APP_BASE_URL + 'kaptcha.jpg?uuid=' + this.loginInfo.uuid
    },
    login (no, event) {
      console.log(event)
      /* 箭头函数的参数有且只有一个的时候，可以省略小括号 */
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.$http.post('login', this.loginInfo).then(data => {
            this.$message.success('登录成功')
            this.$router.replace('/home')
            this.$cookies.set('token', data.data)
          }).catch(() => {}).finally(() => {
            this.getKaptcha()
            this.loginInfo.code = ''
            this.loginInfo.password = ''
          })
        }
      })
    }
  },
  created () {
    this.getKaptcha()
    //
    // const obj = { name: '张三', age: 12 }
    // // const name = obj.name;
    // const { name, age } = obj
    // console.log(name)
    // console.log(age)
    //
    // const arr = [1, 3, 5]
    // const [a, b, c] = arr
    // console.log(a, b, c)
  }
}
</script>

<style scoped lang="scss">
.login-group{
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: url("../../assets/login-bg.jpg") no-repeat center/cover;
  display: flex;
  align-items: center;
  justify-content: center;
  .login-form{
    width: 30vw;
    padding: 25px;
    background-color: rgba(255,255,255,.3);
    border-radius: 25px;
    h3{
      text-align: center;
      height: 50px;
      line-height: 50px;
    }
  }
}
</style>
<style>
.el-input-group__append{
  height: 40px;
  width: 120px;
  padding: 0;
  border: none;
}
</style>
